import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'

function Hooks(props){
	console.log('hooks')
	const [text,setText] = React.useState('')
	const [list,setList] = React.useState(['aa','bb','cc'])
	
	React.useEffect(()=>{
		handleAdd()
	},[list])//[依赖]。 如果指定[]，回调函数只会在第一次render()后执行
	
   function handleChange(e){
	   console.log('handleChange')
	   setText(e.target.value)
   }
   
   function handleAdd(){
	   console.log('handleAdd')
	   if(text){
		   console.log('list1',list)
		   setList([...list,text])
		   setText('')
		   console.log('list2',list)
	   }
	   else{
		   // alert('不能为空！')
	   }
   }
   
   function handleDel(index){
	    console.log('handleDel')
	   // console.log(index)
	   // 这一句不可以，原因未知
	   // setList(list.splice(index,1))
	   let newArray = [...list]
	   newArray.splice(index,1)
	   setList(newArray)
   }
	
	return(
		<div>
			<input type="text" onChange={handleChange} value={text}/>
			<button onClick={handleAdd}>add</button>
			{/* 循环 */}
			<ul>
			{
				list.map((item,index) => 
				<li key={item}>
				<span className='itemTxt'>{item}</span>
				{/* handleDel一定放在函数里,原因未知 */}
				<button onClick={()=>{
					handleDel(index)
				}}>删除</button></li>
				)
			}
			
			</ul>
			
		</div>		
	)		
}

export default Hooks